<template>
    <div>
       <!-- <search-component who="account" @getSearchInit="getSearchInit"></search-component>-->
        <div class="commonStyle nyContent">
            <div class="commonTit">客户端管理</div>
            <a-table :columns="columns"
                     :dataSource="loadData"
                     :rowKey="record => record.id"
                     :pagination="false">
            <span slot="index" slot-scope="text,record,index">
                {{(queryParam.currentPage-1)*queryParam.pageSize+index+1}}
            </span>
            </a-table>
            <Page :totalCount="queryParam.totalCount" :currentPage="queryParam.currentPage" ref="page"
                  :pageSize="queryParam.pageSize"
                  @changePage="changePage" @changePageSize="changePageSize" />
        </div>
    </div>
</template>

<script>
    import Page from 'module/pagination'
    import searchComponent from 'module/searchComponent'

    export default {
        name: 'account',
        components: {
            Page,
            searchComponent
        },
        data () {
            return {
                // 查询参数
                queryParam: {
                    pageSize: 10,
                    currentPage: 1,
                    searchText: '',
                    totalCount: 0
                },
                loadData: [],
                columns: [
                    {title: '序号', key: 'index', width: '100px', align: 'center', scopedSlots: {customRender: 'index'}},
                    {title: '客户端名称', dataIndex: 'clientName', key: 'clientName'},
                    {title: '客户端地址', dataIndex: 'clientRealIp', key: 'clientRealIp'},
                    {title: '客户端虚拟地址', dataIndex: 'clientVirtualIp', key: 'clientVirtualIp', scopedSlots: {customRender: 'clientVirtualIp'}},
                    {title: '服务端地址', dataIndex: 'serverIp', key: 'serverIp'},
                    {title: '服务端虚拟地址', dataIndex: 'serverVirtualIp', key: 'serverVirtualIp'},
                    {title: '连接建立时间', dataIndex: 'connectedTime', key: 'connectedTime'},
                    {title: '传输字节数（MB）',dataIndex: 'sentBytes', key: 'sentBytes', scopedSlots: {customRender: 'sentBytes'}},
                    {title: '接受字节数（MB）', dataIndex: 'receivedBytes',key: 'receivedBytes', scopedSlots: {customRender: 'receivedBytes'}}
                ]
            }
        },
        methods: {

            /**
             * Function    : init
             * Description : 初始化获取数据
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
               /* this.$get('/v1/connections/count').then(res => {
                    if (res.code === 0) {
                        _this.queryParam.totalCount = res.data.count

                    } else {
                        _this.$message.error(res.message)
                    }
                })*/
                /*let parms = {
                    offset:this.queryParam.currentPage,
                    limit:this.queryParam.pageSize,
                }*/
                this.$get('/vpn/queryConnectInfo', this.queryParam).then(res => {
                    if (res.code === 0) {
                        _this.loadData = res.data.rows
                    } else {
                        _this.$message.error(res.message)
                    }
                })
            },

            /**
             * Function    : init
             * Description : 获取搜索列表
             * Input       : none
             * Return      : none
             */
            getSearchInit (opt) {
                this.queryParam.searchText = opt;
                this.queryParam.currentPage = 1;
                this.init()
            },

            /*切换页面*/
            changePage (page) {
                this.queryParam.currentPage = page;
                this.init()
            },
            changePageSize ( vm ) {
                this.queryParam.pageSize = vm
                this.queryParam.currentPage = 1
                this.init ()
            },
        },
        created () {
            this.init()
        }
    }
</script>
